<template>
  <div style="border: 1px solid blue">
    <div>{{ userInfo.info.next.username + " * " + userInfo.level }}</div>
    <button @click="onClick">点击</button>
  </div>
</template>

<script setup>
import { computed, reactive, watch } from "vue";
const state = reactive({
  profile: {
    name: "tom",
    level: "123",
  },
});
const userInfo = computed(() => ({
  info: {
    next: {
      username: state.profile.name,
    },
  },
  level: state.profile.level,
}));

watch(
  () => userInfo.value.info,
  (newValue) => {
    console.log(newValue);
  },
  { deep: false }
);

const onClick = () => {
  state.profile.name = state.profile.name + "a";
  state.profile.level = state.profile.level + "1";
};
</script>
